import Layer from '../core/Layer';
import Rectangle from '../base/Rectangle';
import MultiLine from '../base/MultiLine';
import Event from '../event/Event';
import Point from '../core/Point';
import Curve from '../base/Curve';
export default class extends Layer {
    constructor(canvas, style) {
        super(canvas, style);
        this.isStart = false;
        this.points = [];
        this.isEnd = false;
        this.curve = null;
        this.addEventListener(Event.EVENT_CLICK, (e) => {
            if (!this.isEnd) {
                const { x, y } = e.eventPoint;
                console.log('click ===>', x, y);
                if (this.points.length > 0) {
                    const point = this.points[0];
                    if (point.containsPoint(e.eventPoint)) {
                        this.isEnd = true;
                        console.log('end===>', this);
                        this.drawCurve();
                    }
                }
                const rectangle = new Rectangle(this.canvas, {
                    width: '20px',
                    height: '20px',
                    textAlign: 'center',
                    left: x,
                    bottom: y,
                    type: Rectangle.TYPE.STROKE,
                    ext: new Date().getTime(),
                });
                this.addChild(rectangle);
                console.log('rectangle===>', this);
                this.points.push(rectangle);
                rectangle.addEventListener(Event.EVENT_DRAG, (e) => {
                    if (!this.isEnd) {
                        return;
                    }
                   const { ext } = e.node;
                   const { eventPoint } = e;
                   console.log('ext===>', ext);
                   const pointIndex = this.points.findIndex(vo => vo.ext === ext);
                   console.log('point index==>', pointIndex);
                   if (pointIndex >= 0) {
                       const rect = this.points[pointIndex];
                       rect.left = eventPoint.x;
                       rect.bottom = eventPoint.y;
                       this.drawCurve();
                   }
                });
                //this.drawCurve();
            }
        });
        this.addEventListener(Event.EVENT_MOUSE_MOVE, (e) => {
           if (this.isEnd || this.points.length === 0) {
               return;
           }
           console.log('mouse move===>', e.eventPoint);
           this.drawCurve(e.eventPoint);
        });
    }

    drawCurve(end) {
        if (this.curve !== null) {
            const curveIndex = this.childs.findIndex(vo => vo === this.curve);
            if (curveIndex >= 0) {
                this.childs.splice(curveIndex, 1);
            }
        }
        const pointLen = this.points.length;
        const points = [];
        for (let i = 0; i < this.points.length; i++) {
            points.push(new Point(
                this.points[i].left,
                this.points[i].bottom,
            ));
        }
        if (this.isEnd) {
            points.push(new Point(
                this.points[0].left,
                this.points[0].bottom,
            ));
            console.log('piont===>', points);
        } else {
            points.push(new Point(
                end.x,
                end.y
            ));
        }
        const curve = new Curve(this.canvas, {
            left: 0,
            bottom: 0,
        }, points);
        this.curve = curve;
        this.addChild(curve);
        this.canvas.paint();
    }
}
